<!--
 * @FilePath     : /study_code/vue2.x/createElement12 copy.html
 * @Description  : 第2参数， slot, scopedSlots
 * @Date         : 2025-05-03 10:29:43
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-05-03 10:29:47
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dname</title>
  </head>

  <body>
    <div id="app"></div>

    <script src="/vue/dist/vue.min.js"></script>
    <script src="./common.js"></script>
    <script>
      /**
       * @1、渲染函数中访问插槽内容
       * 你可以通过 this.$slots 访问静态插槽的内容，每个插槽都是一个 VNode 数组集合。 （下面示例中 header 组件 log this.$slots）
       * !注意1：插槽内容在渲染时，至少要用一个 div/template 容器包裹（否则会报错）
       *
       * @2、具名插槽
       * 指定：在 children 子节点中指定插槽名 以使用具名插槽，未指定插槽名的则放入匿名插槽中
       * （示例中：渲染 header 组件 传入子节点时，在节点的 VNode 数据对象第2参数中的 slot 属性配置节点名称。）
       * 使用：组件中，使用 this.$slots.插槽名指定插槽内容使用的位置；
       * （示例中：this.$slot.icon, this.$slot.leftTitle）
       *
       * @3、作用域插槽
       * !注意1：哪个组件需要使用作用域插槽，就定义在该组件的数据对象内；
       * （示例中：根级组件在渲染 header 时，定义 scopedSlots；
       * !注意2：定义 插槽-作用域时，
       * !注意3：向 插槽-作用域 传值时，①需要访问 `this.$scopedSlots.作用域名称()`；②向括号内传值；
       * !注意4：访问插槽作用域数据时，①访问值即上面“注意3”括号内传入的值；②返回值是一个 VNode数组，会渲染在作用域插槽名称对应的位置；
       * !注意5：可定义多个作用域插槽，使用时根据，`this.$scopedSlots.作用域名称()` 中的作用域名称一一对应；
       */

      // 二级组件
      const header = {
        data: function () {
          return {
            msg: 'header 组件',
            message: '这里放作用域插槽内容',
          }
        },
        render: function (createElement) {
          console.log('头部默认插槽', this.$slots)
          console.log('作用域插槽', this.$scopedSlots)
          return createElement('header', [
            createElement('h2', { class: ['top-title'] }, this.msg),
            createElement('div', { attrs: { title: '插槽-图标' } }, this.$slots.icon), // 插槽-图标
            createElement('div', { attrs: { title: '插槽-默认' } }, this.$slots.default), // 默认插槽内容
            createElement('div', { attrs: { title: '插槽-标题' } }, this.$slots.leftTitle), // 插槽-标题
            createElement('div', { attrs: { title: '插槽-作用域' } }, [
              this.$scopedSlots.fygSlot({ fygTit: '菜单栏目11' }),
              this.$scopedSlots.wllSlot({ wllTit: '菜单栏目22' }),
            ]), // 作用域插槽
          ])
        },
      }

      // 根级组件
      var app = new Vue({
        el: '#app',
        data: function () {
          return {}
        },
        mounted() {
          /**
           * @brief: 渲染函数中通过 this.$slots 访问当前组件的插槽内容
           */
        },
        render: function (createElement) {
          return createElement('div', {}, [
            createElement(
              header,
              // （使用）作用域插槽
              {
                scopedSlots: {
                  fygSlot: ({ fygTit }) => {
                    return [createElement('h4', '作用域-1'), createElement('span', fygTit)]
                  },
                  wllSlot: ({ wllTit }) => {
                    return [createElement('h4', '作用域-2'), createElement('span', wllTit)]
                  },
                },
              },
              [
                // （使用插槽）默认|匿名 插槽（未指定插槽名的则放入"匿名|默认"插槽中）
                createElement(
                  'div',
                  {
                    attrs: {
                      title: 'slot-default1',
                    },
                  },
                  [createElement('p', {}, ['插槽-默认1'])]
                ),
                // （使用插槽）具名插槽
                createElement(
                  'div',
                  {
                    attrs: {
                      title: 'slot-icon1',
                    },
                    slot: 'icon',
                  },
                  [createElement('i', {}, ['插槽-图标'])]
                ),
                createElement(
                  'template',
                  {
                    attrs: {
                      title: 'slot-icon2',
                    },
                    slot: 'leftTitle',
                  },
                  [createElement('span', {}, ['插槽-标题'])]
                ),
                // 默认|匿名 插槽
                createElement(
                  'div',
                  {
                    attrs: {
                      title: 'slot-default2',
                    },
                  },
                  [createElement('p', {}, ['插槽-默认2'])]
                ),
              ]
            ),
          ])
        },
      })
    </script>
  </body>
</html>
